<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'MyJsp.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<jsp:include page="/scripts/common/index.html"></jsp:include>
<jsp:include page="/scripts/dhtmlx/index.html"></jsp:include>
<jsp:include page="/scripts/jquery/index.html"></jsp:include>
<jsp:include page="/scripts/bootstrap/index.html"></jsp:include>
<link rel="stylesheet" href="${basepath }style/default.css">
</head>
<script type="text/javascript">
	$(function() {
		$("#addCell").click(function() {
			addNewRow("1");
		});
		$("#deleteCell").click(function() {
			del(1);
		});
		$("#checkbox_all").click(function() {
			checkboxAll(document.getElementById("checkbox_all"));
		})
	});
	function save() {
		$.ajax({
				type : 'POST' ,
				url : '${bathPath}page/model/Page/doUpd' ,
				data : $('#MyForm').serialize() ,
				dataType : "json" ,
				async : true ,
				cache : false ,
				jsonpCallback : "null" ,
				//beforeSend : function(response, status, statusText) {
				//alert(response + ":" + status + ":" + statusText);
				//} ,
				//dataFilter : function(response, status, statusText) {
				//alert(response + ":" + status + ":" + statusText);
				//} ,
				success : function(response, status, statusText) {
					//alert(response + ":" + status + ":" + statusText);
					if (response.status) {
						SN.alert.info("保存成功", function() {
							parent.query();
// 							closeWindow();
						});
					} else {
						alert(response.content);
					}
				} ,
				error : function(response, status, statusText) {
					//alert(response + ":" + status + ":" + statusText);
				} ,
				complete : function(response, status, statusText) {
					//alert(response + ":" + status + ":" + statusText);
				}
		});
		
	}
	function closeWindow() {
		parent.w1.close();
	}
	var row_count = 2; //因为页面已经有一行了，所以直接从2开始。
	function addNewRow(a) {
		var table1 = $("#time_table");
		var row = $("<tr></tr>");
		var td_1 = $("<td class='cellClass'></td>");
		var td_2 = $("<td></td>");
		var td_3 = $("<td></td>");
		var td_4 = $("<td></td>");
		var td_5 = $("<td align='center'></td>");
		td_1.append("<input type='checkbox' id='checkbox_"+row_count+"'/>");
		td_2.append("<input type='text' class='form-control' id='name"+row_count+"'>");
		td_3.append("<select class='form-control' id='sex"+row_count+"'><option>男</option><option>女</option></select>");
		td_4.append("<input type='text' class='form-control' id='telphone"+row_count+"'>");
		td_5.append("<a href='#'>关联操作</a>");
		row.append(td_1);
		row.append(td_2);
		row.append(td_3);
		row.append(td_4);
		row.append(td_5);
		table1.append(row);
		row_count++;
	}
	function del(e) {
		var trNum = document.getElementById("time_table").children[0].children;
		for ( var i = 1; i < trNum.length; i++) {
			if (trNum[i].children[0].children[0].checked) {
				e = trNum[i].children[0].children[0].id.split("_")[1];
				//获取选中的复选框，然后循环遍历删除
				var ckbs = $("#checkbox_" + e + "");
				// 				ckbs.each(function() {
				$("#checkbox_" + e + "").parent().parent().remove();
				// 				});
			}
		}
		var trlenght = document.getElementById("time_table").children[0].children.length;
		if (trlenght < 2) {
			addNewRow(1);
		}
	}
	function checkboxAll(obj) {
		if (obj.checked) {
			checkAll();
		} else {
			checkNone();
		}
	}
	function checkAll() {
		var trNum = document.getElementById("time_table").children[0].children;
		for ( var i = 1; i < trNum.length; i++) {
			trNum[i].children[0].children[0].checked = "true";
		}
	}
	function checkNone() {
		var trNum = document.getElementById("time_table").children[0].children;
		for ( var i = 1; i < trNum.length; i++) {
			trNum[i].children[0].children[0].checked = false;
		}
	}
	function uploadPage() {
		window.location.href = "${basePath}common/FileUpload.jsp";
	}
</script>
<body>
	<form id="MyForm" name="MyForm">
		<table class="contTable">
			<tr class="firstTr">
				<td>
					<button class="btn btn-primary" type="button" onclick="save()">
						<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> &nbsp; <span>保存</span>
					</button>
					<button class="btn btn-primary" type="button" onclick="closeWindow()">
						<span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span> &nbsp; <span>关闭</span>
					</button>
				</td>
			</tr>
			<tr style="height:auto">
				<td valign="top">
					<div style="width:100%;height:300px;overflow-y:auto;">
						<div class="blockBorder">
							<strong>基本信息</strong>
							<div></div>
							<input id="guid" name="map.guid" type="hidden" class="form-control" value="${map.guid }"> id: <input id="id" name="map.id" type="text" class="form-control" value="${map.id }"> code: <input id="code" name="map.code" type="text" class="form-control" value="${map.code }"> name: <input id="name" name="map.name" type="text" class="form-control" value="${map.name }"> type: <input id="type" name="map.type" type="text" class="form-control" value="${map.type }"> tier1: <input id="tier1" name="map.tier1" type="text" class="form-control" value="${map.tier1 }"> tier2: <input id="tier2" name="map.tier2" type="text" class="form-control" value="${map.tier2 }"> tier3: <input id="tier3" name="map.tier3" type="text" class="form-control" value="${map.tier3 }"> description: <input id="description" name="map.description" type="text" class="form-control" value="${map.description }"> dpt: <input id="dpt" name="map.dpt"
								type="text" class="form-control" value="${map.dpt }"> province: <input id="province" name="map.province" type="text" class="form-control" value="${map.province }"> city: <input id="city" name="map.city" type="text" class="form-control" value="${map.city}"> address: <input id="address" name="map.address" type="text" class="form-control" value="${map.address }">
							<hr>
							<table class="tableCont">
								<tr>
									<td class="titleClass" style="width:8%;">姓名：</td>
									<td class="contClass" style="width:42%"><input type="text" class="form-control" value="修改"></td>
									<td class="titleClass">性别：</td>
									<td class="contClass"><select class="form-control">
											<option selected="selected">男</option>
											<option>女</option>
									</select></td>
								</tr>
								<tr>
									<td class="titleClass">年龄：</td>
									<td class="contClass"><input type="text" class="form-control" value="20"></td>
									<td class="titleClass">学历：</td>
									<td class="contClass"><input type="text" class="form-control" value="本科"></td>
								</tr>
								<tr>
									<td class="titleClass">类型：</td>
									<td class="contClass"><select class="form-control">
											<c:forEach var="tmp" items="${typeList }">
												<option value="${tmp.code }" ${tmp eq map.type?'selected="selected"':'' }>${tmp.name }</option>
											</c:forEach>
									</select></td>
									<td class="titleClass">学历：</td>
									<td class="contClass"><input type="text" class="form-control" value="本科"></td>
								</tr>
								<tr>
									<td class="titleClass">附件：</td>
									<td class="contClass" colspan="3">
										<button id="uploadBtn" onclick="uploadPage()" class="btn btn-primary" type="submit" style="position:relative;left:1%">附件上传</button>
									</td>
								</tr>
								<tr>
									<td class="titleClass"></td>
									<td colspan="3">
										<table class="table">
											<tbody>
												<tr>
													<td style="width:80%"><a href="#">附件1</a></td>
													<td style="width:20%" align="center">
														<button class="btn btn-primary" type="submit" style="position:relative;left:1%">删除</button>
													</td>
												</tr>
												<tr>
													<td style="width:80%"><a href="#">附件1</a></td>
													<td style="width:20%" align="center">
														<button class="btn btn-primary" type="submit" style="position:relative;left:1%">删除</button>
													</td>
												</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td class="titleClass">描述：</td>
									<td class="textareaClass" colspan="3"><textarea class="form-control" rows="3" style="width:99%">没有描述</textarea></td>
								</tr>
							</table>
						</div>
						<div class="blockBorder">
							<strong>从表信息</strong>
							<hr>
							<table id="time_table" class="table table-striped table-bordered">
								<tbody align="center" class="childTable">
									<tr style="background:#f0efef" class="childTitle">
										<td style="width:5%"><input type="checkbox" id="checkbox_all" /></td>
										<td style="width:25%">姓名</td>
										<td style="width:25%">性别</td>
										<td style="width:25%">联系方式</td>
										<td style="width:20%"><span style="position:relative;margin:auto">关联操作</span></td>
									</tr>
									<tr class="childCont" id="tr_1">
										<td class="cellClass"><input type="checkbox" id="checkbox_1" /></td>
										<td><input type="text" class="form-control"></td>
										<td><select class="form-control">
												<option>男</option>
												<option>女</option>
										</select></td>
										<td><input type="text" class="form-control"></td>
										<td align="center"><a href="#">关联操作</a></td>
									</tr>
								</tbody>
							</table>
							<table id="addTable" class="table table-striped table-bordered">
								<tbody>
									<tr class="footerCont">
										<td colspan="5">
											<button class="btn btn-primary" type="button" id="addCell">
												<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
											</button>
											<button class="btn btn-primary" type="button" id="deleteCell">
												<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
											</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
